require(["config"],function(){
	require(["jquery","template","cookie","carousel","fly","header","footer"],function($,template){
	  // 获取数据   推荐商铺模板渲染
      $.get("http://rap2api.taobao.org/app/mock/25789/api/index-tuijian",function(data){
		// console.log(data)
			 let html=template("img2",{list:data.res_body.img});
			//   console.log(data.res_body.img)
			  //在元素尾部添加	
			  $(".tuijian-img").append(html);
			  //主页轮播图
		$(".banner .center").carousel({
			imgs:[
				{
					src:"/images/banner1.jpg",
					href:"#"
				},
				{
					src:"/images/banner2.jpg",
					href:"#"
				},
				{
					src:"/images/banner3.jpg",
					href:"#"
				}	
		],
		width:"1000",
		height:"416",
		isButton:false,
		isCircle:true
		});
	  }).then(function(){
		  //img绑定事件 委派给 tuijian-img
		$(".tuijian-img").on("mouseover","img",function(){
			// console.log(this)
			// console.log($(".tuijian-img img"))
			//运动轨迹
			$(this).animate({marginTop:"5PX"},300,function(){
				$(this).animate({marginTop:"10PX"},300,function(){
					$(this).animate({marginTop:"15PX"},300,function(){
						$(this).animate({marginTop:"10PX"},300,function(){
							$(this).animate({marginTop:"15PX"},300,function(){
								$(this).animate({marginTop:"13PX"},300,function(){
									$(this).animate({marginTop:"15PX"},300,function(){
				
									})
								})
							})
						})
					})
				})
			})
		})
	  }).then(function(){
		  //请求数据
		$.getJSON("http://rap2api.taobao.org/app/mock/25789/api/fenlei", data=>{
			//渲染模板
			const top = template("fenlei-top", {list:data.res_body});
			const img = template("fenlei-img", {list:data.res_body});
			$(".fenlei").append(top);
			$(".fenlei").append(img);
		     //先默认给第一个添加激活属性
			$(".fenlei .top li:first").addClass("active");
			//让下面详细除了第一个其他的全部隐藏
			$(".fenlei .img:not(:first)").hide();
		}).then(()=>{
			//绑定事件
			$(".fenlei .top").on("mouseenter", "li", function(){
				//获取到当前元素在同级中的下标
				const index = $(this).index();
				//将当前元素添加激活属性   然后将其他元素的激活属性删除
				$(this).addClass("active").siblings().removeClass("active");
				//当前元素de详情页面显示  其他兄弟除了。top 全部隐藏
				$(".fenlei .img").eq(index).show().siblings(":not(.top)").hide();
			});
		});
	  })
			//加载楼层模板数据  设置promise对象  后面就可以等他执行完成后在执行就可以拿到模板中元素
		return new Promise(function(resolve,reject){
			$.get("http://rap2api.taobao.org/app/mock/25789/api/louchen",function(data){
						// console.log(data)
						const html=template("louchen",{list:data.res_body});
						//  console.log(html);
							$(".louchen").html(html);
							//页面中是右浮 所以元素顺序颠倒了(后代所有第一个span)  最后一个就是第一个   默认给第一个样式
							$(".louchen>.top ").find("span:last").addClass("actives");
							// console.log($(".louchen>.top ").find("span:last"))
								//让下面详细除了第一个其他的全部隐藏
							$(".bottom>ul").not(":last-child").hide();
							resolve();
					})
		}).then(function(){
			 //绑定事件  绑定给页面本身切是他们父元素的元素   
			 $(".louchen").on("mouseenter",".top span",function(){
				 $(this).addClass("actives").siblings().removeClass("actives")
				 const index=$(this).index()
				//  console.log(index)
				  //找bottom
				const ul=$(this).parent().next().find("ul")
				 console.log(ul)
				$(ul).eq(index-1).show().siblings(":not(.left)").hide() ;
			 }) 
		}).then(function(){
			//楼层模板中的轮播图
			$("#lb1").carousel({
				imgs:[
					{
						src:"/images/banner1-1.jpg",
						href:"#"
					},
					{
						src:"/images/banner1-2.jpg",
						href:"#"
					},
					{
						src:"/images/banner1-3.jpg",
						href:"#"
					}	
			],
			width:"270",
			height:"475",
			isButton:false,
			isCircle:true
			});
				$("#lb2").carousel({
				imgs:[
					{
						src:"/images/banner2-1.jpg",
						href:"#"
					},
					{
						src:"/images/banner2-2.jpg",
						href:"#"
					},
					{
						src:"/images/banner2-3.jpg",
						href:"#"
					}	
			],
			width:"270",
			height:"475",
			isButton:false,
			isCircle:true
			});	
			$("#lb3").carousel({
				imgs:[
					{
						src:"/images/banner3-1.jpg",
						href:"#"
					},
					{
						src:"/images/banner3-2.jpg",
						href:"#"
					},
					{
						src:"/images/banner3-3.jpg",
						href:"#"
					}	
			],
			width:"270",
			height:"475",
			isButton:false,
			isCircle:true
			});
				$("#lb4").carousel({
				imgs:[
					{
						src:"/images/banner1-1.jpg",
						href:"#"
					},
					{
						src:"/images/banner1-2.jpg",
						href:"#"
					},
					{
						src:"/images/banner1-3.jpg",
						href:"#"
					}	
			],
			width:"270",
			height:"475",
			isButton:false,
			isCircle:true
			});	
			$("#lb5").carousel({
				imgs:[
					{
						src:"/images/banner1-1.jpg",
						href:"#"
					},
					{
						src:"/images/banner2-2.jpg",
						href:"#"
					},
					{
						src:"/images/banner3-3.jpg",
						href:"#"
					}	
			],
			width:"270",
			height:"475",
			isButton:false,
			isCircle:true
			});
		}).then(function(){
			//加入购物无车  绑定事件  加入购物车
			$(".louchen").on("click","button",function(e){
				//获取到商品信息
				const minute={
					id:$(this).parent().attr("id").slice(1),
					img:$(this).prev().children("img").attr("src"),
					title:$(this).prev().children("p").text(),
					price:$(this).prev().children("span").text().slice(1),
					amout:1
				}
				// console.log(minute)
				//配置cookie
				$.cookie.json=true;
				//读取cookie  没有就创建一个数组
				const chengang=$.cookie("chengang")||[];
				console.log(chengang);
				//把数量加一
				const has=chengang.some(function(cull){
					console.log("kjnf")
						if(minute.id===cull.id){//说明有就把数量加一
							cull.amout++;
							return true;
						}
				});
				console.log(minute.amout)
				if(!has){//说明cookie中没有数据就把商品添加进去
					chengang.push(minute);
				}
				//保存cookie
				$.cookie("chengang",chengang,{expires:10,path:"/"});
				//计算修改侧边栏购物车数量
                const number=chengang.reduce(function(sum,curr){
					return	sum+=curr.amout	
				},0)
				$("#aside_cart p").text(number);
				//添加购物车效果
				const end=$("#aside_cart").offset();//抛物线终点  被调用会返回top 和left
				const start={left:e.pageX-140,top:e.pageY-200};//抛物线起点
				//图片路径
				const url=$(this).prev().children("img").attr("src");
				const flyer=$(`<img src="${url}"style="width:140px;z-index:999;border-radius:50%;">`);//抛物线
				flyer.fly({
					start:{
						left:start.left-$(window).scrollLeft(),
						top:start.top-$(window).scrollTop()            
					},
					end:{
						left:end.left-$(window).scrollLeft(),
						top:end.top-$(window).scrollTop() 
					},
					onEnd:function(){
						this.destroy();//这个this是他自带的就不用$包装
					}
				});
				return false;
			})
		});
		
	})
	
	window.onscroll = function () {
		var top = document.documentElement.scrollTop || document.body.scrollTop;
		console.log(top)
	}

})
